<template>
    <div class="certificate-page">
      <Header :title="title" :isWhite="false"></Header>
  
      <!-- 空状态展示 -->
      <div class="empty-container">
        <div class="eco-icon">📑</div>
        <h3 class="empty-title">暂未获得证书</h3>
        <p class="empty-tip">完成环保课程学习即可解锁相应证书</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import Header from '@/components/Header.vue';
  const title = '我的证书';
  </script>
  
  <style scoped>
  .certificate-page {
    min-height: 100vh;
    padding: 20px;
    background: #f8fbf9;
  }
  
  .empty-container {
    max-width: 400px;
    margin: 80px auto 0;
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(46,125,50,0.08);
  }
  
  .eco-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.8;
    color: #2e7d32;
  }
  
  .empty-title {
    color: #2e7d32;
    margin: 0 0 10px;
    font-size: 18px;
  }
  
  .empty-tip {
    color: #666;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }
  
  @media (max-width: 480px) {
    .empty-container {
      margin-top: 50px;
      padding: 30px 20px;
    }
    
    .eco-icon {
      font-size: 56px;
    }
  }
  </style>